<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>免费在线大转盘抽奖</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/gh/BATdalao/cdn_jsDelivr/css/zp.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/BATdalao/cdn_jsDelivr/js/awardRotate.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script type="text/javascript">
		var turnplate = {
			restaraunts: [], //大转盘奖品名称
			colors: [], //大转盘奖品区块对应背景颜色
			outsideRadius: 192, //大转盘外圆的半径
			textRadius: 155, //大转盘奖品位置距离圆心的距离
			insideRadius: 68, //大转盘内圆的半径
			startAngle: 0, //开始角度

			bRotate: false //false:停止;ture:旋转
		};

		$(document).ready(function() {
			//动态添加大转盘的奖品与奖品区域背景颜色
			turnplate.restaraunts = ["50M免费流量包", "10闪币", "谢谢参与", "5闪币", "10M免费流量包", "20M免费流量包", "20闪币 ", "30M免费流量包", "100M免费流量包", "2闪币"];
			turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];

			var rotateTimeOut = function() {
				$('#wheelcanvas').rotate({
					angle: 0,
					animateTo: 2160,
					duration: 8000,
					callback: function() {
						alert('网络超时，请检查您的网络设置！');
					}
				});
			};

			//旋转转盘 item:奖品位置; txt：提示语;
			var rotateFn = function(item, txt) {
				var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
				if(angles < 270) {
					angles = 270 - angles;
				} else {
					angles = 360 - angles + 270;
				}
				$('#wheelcanvas').stopRotate();
				$('#wheelcanvas').rotate({
					angle: 0,
					animateTo: angles + 1800,
					duration: 8000,
					callback: function() {
						alert(txt);
						turnplate.bRotate = !turnplate.bRotate;
					}
				});
			};

			$('.pointer').click(function() {
				if(turnplate.bRotate) return;
				turnplate.bRotate = !turnplate.bRotate;
				//获取随机数(奖品个数范围内)
				var item = rnd(1, turnplate.restaraunts.length);
				//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
				rotateFn(item, turnplate.restaraunts[item - 1]);
				/* switch (item) {
                    case 1:
                        rotateFn(252, turnplate.restaraunts[0]);
                        break;
                    case 2:
                        rotateFn(216, turnplate.restaraunts[1]);
                        break;
                    case 3:
                        rotateFn(180, turnplate.restaraunts[2]);
                        break;
                    case 4:
                        rotateFn(144, turnplate.restaraunts[3]);
                        break;
                    case 5:
                        rotateFn(108, turnplate.restaraunts[4]);
                        break;
                    case 6:
                        rotateFn(72, turnplate.restaraunts[5]);
                        break;
                    case 7:
                        rotateFn(36, turnplate.restaraunts[6]);
                        break;
                    case 8:
                        rotateFn(360, turnplate.restaraunts[7]);
                        break;
                    case 9:
                        rotateFn(324, turnplate.restaraunts[8]);
                        break;
                    case 10:
                        rotateFn(288, turnplate.restaraunts[9]);
                        break;
                } */
				console.log(item);
			});
		});

		function rnd(n, m) {
			var random = Math.floor(Math.random() * (m - n + 1) + n);
			return random;

		}

		//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
		window.onload = function() {
			drawRouletteWheel();
		};

		function drawRouletteWheel() {
			var canvas = document.getElementById("wheelcanvas");
			if(canvas.getContext) {
				//根据奖品个数计算圆周角度
				var arc = Math.PI / (turnplate.restaraunts.length / 2);
				var ctx = canvas.getContext("2d");
				//在给定矩形内清空一个矩形
				ctx.clearRect(0, 0, 422, 422);
				//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
				ctx.strokeStyle = "#FFBE04";
				//font 属性设置或返回画布上文本内容的当前字体属性
				ctx.font = '16px Microsoft YaHei';
				for(var i = 0; i < turnplate.restaraunts.length; i++) {
					var angle = turnplate.startAngle + i * arc;
					ctx.fillStyle = turnplate.colors[i];
					ctx.beginPath();
					//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
					ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
					ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
					ctx.stroke();
					ctx.fill();
					//锁画布(为了保存之前的画布状态)
					ctx.save();

					//----绘制奖品开始----
					ctx.fillStyle = "#E5302F";
					var text = turnplate.restaraunts[i];
					var line_height = 17;
					//translate方法重新映射画布上的 (0,0) 位置
					ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

					//rotate方法旋转当前的绘图
					ctx.rotate(angle + arc / 2 + Math.PI / 2);

					/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
					if(text.indexOf("M") > 0) { //流量包
						var texts = text.split("M");
						for(var j = 0; j < texts.length; j++) {
							ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
							if(j == 0) {
								ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
							} else {
								ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
							}
						}
					} else if(text.indexOf("M") == -1 && text.length > 6) { //奖品名称长度超过一定范围
						text = text.substring(0, 6) + "||" + text.substring(6);
						var texts = text.split("||");
						for(var j = 0; j < texts.length; j++) {
							ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
						}
					} else {
						//在画布上绘制填色的文本。文本的默认颜色是黑色
						//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
						ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
					}

					//添加对应图标
					/*if(text.indexOf("闪币") > 0) {
                        var img = document.getElementById("shan-img");
                        img.onload = function() {
                            ctx.drawImage(img, -15, 10);
                        };
                        ctx.drawImage(img, -15, 10);
                    } else if(text.indexOf("谢谢参与") >= 0) {
                        var img = document.getElementById("sorry-img");
                        img.onload = function() {
                            ctx.drawImage(img, -15, 10);
                        };
                        ctx.drawImage(img, -15, 10);
                    }*/
					//把当前画布返回（调整）到上一个save()状态之前
					ctx.restore();
					//----绘制奖品结束----
				}
			}
		}

		function addInput() {
			$('#optionBox').append('<div class="row" style="margin-top: 10px;"><input type="text" class="form-control col-11" placeholder="输入新选项(最多五个字符)"><button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button></div>');
		}
		colorsArr = ["#FFF4D6", "#FFFFFF"];

		function returnColor() {
			var a = turnplate.restaraunts.length;
			var color = turnplate.restaraunts.map(function(item, index, array) {
				if(a % 2) {
					return(index + 1) == a ? colorsArr[1] : colorsArr[index % 2]
				} else {
					return colorsArr[index % 2];
				}
			})
			turnplate.colors = color;
		}

		function update() {
			var flag = 0;
			var newData = []
			$('#optionBox .row').each(function() {
				var val = $(this).find('input').val();
				if($.trim(val) != '') {
					flag++;
					newData.push(val);
				}
			});
			if(flag >= 2) {
				turnplate.restaraunts = newData;
				returnColor();
				drawRouletteWheel();
				$('#myModal').modal('hide')
				//$("input").val("")
			} else {
				alert("输入选项（最少2组）")
			}
		}

		function deleteInput() {
			// 删除选项,每次删除最后一个
			$("#optionBox>.row").last().remove();
		}
    </script>
</head>

<body style="background:rgb(235,80,84,1);overflow-x:hidden;">
<img src="https://cdn.jsdelivr.net/gh/BATdalao/cdn_jsDelivr/imgs/1.png" id="shan-img" style="display:none;" />
<img src="https://cdn.jsdelivr.net/gh/BATdalao/cdn_jsDelivr/imgs/2.png" id="sorry-img" style="display:none;" />
<h1 align="center" style="color: #fff;margin-top: 15px;">抽奖大转盘</h1>
<div class="row">
    <div class="col-md-4 offset-md-4 col-12">
        <div class="banner">
            <div class="turnplate" style="background-image:url(https://cdn.jsdelivr.net/gh/BATdalao/cdn_jsDelivr/imgs/turnplate-bg.png);background-size:100% 100%;">
                <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
                <img class="pointer" src="https://cdn.jsdelivr.net/gh/BATdalao/cdn_jsDelivr/imgs/turnplate-pointer.png" />
            </div>
        </div>
    </div>
    <div class="col-12 text-center" style="margin-bottom: 20px;">
        <button type="button" class="btn" style="background-color: rgb(72,102,122,1);color: #fff;" data-toggle="modal" data-target="#myModal">
            设置装盘参数
        </button>
    </div>

</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">设置装盘参数</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="form-group" id="optionBox">
                    <label>请输入选项（最少2组）</label>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="50M免费流量包" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="10闪币" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="谢谢参与" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="5闪币" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="10M免费流量包" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="20M免费流量包" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="20闪币" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="30M免费流量包" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="100M免费流量包" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                    <div class="row" style="margin-top: 10px;">
                        <input type="text" class="form-control col-11" value="2闪币" placeholder="输入新选项(最多五个字符)">
                        <button type="button" style="margin-left: 10px;" class="close" onclick="deleteInput()">&times;</button>
                    </div>
                </div>
                <div class="form-group" style="margin-top: 10px;">
                    <button type="button" onclick="addInput()" style="background-color: rgb(50,213,184,1);color: #fff;" class="btn">新增</button>
                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" onclick="update()" style="background-color: rgb(72,102,122,1);color: #fff;" class="btn">确定</button>
            </div>

        </div>
    </div>
</div>
<p class="container text-center">
    友情链接:<a href="https://wmcoder.site/" style="margin-left: 10px;">未名编程</a>
</p>
</body>

</html>
